<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            width: 150px;
            height: 30px;
            text-decoration: none;
            display: block;
            margin: 10px auto;
            background: goldenrod;
            color: #fff;
            border-radius: 15px;
            line-height: 30px;
        }

        a:hover {
            background: gold;
            color: #666;
        }

        body {
            background: #000;
            text-align: center;
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            margin: 20px auto;
        }

        .list li {
            position: relative;
            transition: all 1s;
            margin-top: 15px;
        }

        .list li:first-child {
            margin-left: 0;
        }

        .list li:hover {
            transform: scale(1.3);
            z-index: 999;
        }

        .list li img {
            width: 100px;
        }
    </style>
</head>

<body>
    <!-- 利用对象数组渲染英雄列表案例 -->
    <!-- <ul class="list">
        <li><img src="uploads/01.jpg" title="司马懿"></li>
        <li><img src="uploads/02.jpg" title="司马懿"></li>
        <li><img src="uploads/03.jpg" title="司马懿"></li>
        <li><img src="uploads/04.jpg" title="司马懿"></li>
        <li><img src="uploads/05.jpg" title="司马懿"></li>
        <li><img src="uploads/06.jpg" title="司马懿"></li>
        <li><img src="uploads/07.jpg" title="司马懿"></li>
        <li><img src="uploads/08.jpg" title="司马懿"></li>
        <li><img src="uploads/09.jpg" title="司马懿"></li>
        <li><img src="uploads/10.jpg" title="司马懿"></li>
        <li><img src="uploads/11.jpg" title="司马懿"></li>
        <li><img src="uploads/12.jpg" title="司马懿"></li>
        <li><img src="uploads/13.jpg" title="司马懿"></li>
        <li><img src="uploads/14.jpg" title="司马懿"></li>
        <li><img src="uploads/16.jpg" title="司马懿"></li>
    </ul> -->
    <script>
        let datas = [
            { name: '司马懿', imgSrc: '01.jpg' },
            { name: '女娲', imgSrc: '02.jpg' },
            { name: '百里守约', imgSrc: '03.jpg' },
            { name: '亚瑟', imgSrc: '04.jpg' },
            { name: '虞姬', imgSrc: '05.jpg' },
            { name: '张良', imgSrc: '06.jpg' },
            { name: '安其拉', imgSrc: '07.jpg' },
            { name: '李白', imgSrc: '08.jpg' },
            { name: '阿珂', imgSrc: '09.jpg' },
            { name: '墨子', imgSrc: '10.jpg' },
            { name: '鲁班', imgSrc: '11.jpg' },
            { name: '嬴政', imgSrc: '12.jpg' },
            { name: '孙膑', imgSrc: '13.jpg' },
            { name: '周瑜', imgSrc: '14.jpg' },
            { name: '老夫子', imgSrc: '15.jpg' },
            { name: '狄仁杰', imgSrc: '16.jpg' },
            { name: '扁鹊', imgSrc: '17.jpg' },
            { name: '马可波罗', imgSrc: '18.jpg' },
            { name: '露娜', imgSrc: '19.jpg' },
            { name: '孙悟空', imgSrc: '20.jpg' }
        ]

        document.write(`
        <ul class="list"> 
        `)
        for (let i = 0; i < datas.length; i++) {
            document.write(`
            <li><img src = 'uploads/${datas[i].imgSrc}' title = "${datas[i].name}"</li> 
            `)
        }
        document.write(`
        </ul>    
        `)


    </script>
</body>

</html>